<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../static/js/app.js"></script>
    <script src="../../lib/xm-select/xm-select.js"></script>
    <link rel="stylesheet" href="../../static/css/font.css">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">

    <style type="text/css">
        #demo2 > img {
            width: 33%;
            height: 115px;
        }
        #demo1 {
            width: 100%;
            height: 270px;
        }
    </style>
</head>
<body class="layui-layout-body" style="overflow: auto;">
<div class="layui-container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">附加图片</label>
            <div class="layui-input-block" id="test2">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图(可上传多张)：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" id="testListAction">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">立即重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" data-th-inline="javascript">
    layui.use(['form', 'layedit', 'upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery
            , upload = layui.upload;

        //多图片上传 （其实也是一个单文件上传）
        upload.render({
            elem: '#test2'
            ,size: 500 //限制文件大小，单位 KB
            ,url: global.api_url + "/filesController/batchUpload"
            ,headers:{content_type: "application/json;charset=UTF-8",Authorization:getUser().token}
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕
                $("#demo2").append('<input type="hidden" name="add_pic" value="'+ res.data +'"/>');
            }
        });

    })
</script>
</html>